<template>
  <div class="subMenu">
    <div v-for="route in sideMenu">
      <!-- 嵌套菜单 -->
      <el-submenu index="3" v-if="route.children && route.children.length > 0">
        <template slot="title">
          <i :class="route.meta['icon'] ? route.meta['icon'] : ''"></i>
          <span>{{ route.meta.name }}</span>
        </template>
        <!-- 嵌套在subMenu中使用 -->
        <el-menu-item-group>
          <sub-menu :sideMenu="route.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>

      <!-- 一级菜单 -->
      <el-menu-item v-else @click="jump(route)" :index="route.meta.fullPath">
        <i :class="route.meta['icon'] ? route.meta['icon'] : ''"></i>
        <span slot="title">{{ route.meta.name }}</span>
      </el-menu-item>
    </div>
  </div>
</template>
<script>
export default {
  name: "sub-menu",
  props: {
    sideMenu: {
      //接收的参数是一个符合routes配置选项的数组
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    jump(route) {
      // console.log(route);
      //判断route的meta属性中有没有fullPath属性
      if (route.meta["fullPath"]) {
        return;
      }
      // console.log(route.name);
      this.$router.push({ name: route.name });
    },
  },
  mounted() {
    // console.log(this.sideMenu);
  },
};
</script>
<style scoped></style>
